<!DOCTYPE html>
<html>
  <head>
    <title>neuomorphism button</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
      * {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 min-height: 100vh;
	 background: #ebf5fc;
}
 ul {
	 position: relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-wrap: wrap;
	 border-radius: 10px;
	 padding: 20px;
	 width: 240px;
	 background: #ebf5fc;
	 box-shadow: -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1);
}
 ul li {
	 position: relative;
	 list-style: none;
	 text-align: center;
	 margin: 15px;
}
 ul li label {
	 position: relative;
	 cursor: pointer;
}
 ul li label input[type="checkbox"] {
	 position: absolute;
	 opacity: 0;
}
 ul li label :checked ~ .icon-box {
	 box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1), inset 3px 3px 5px rgba(0, 0, 0, 0.1);
}
 ul li label :checked ~ .icon-box .fa {
	 transform: scale(0.95);
}
 ul li label .icon-box {
	 width: 60px;
	 height: 60px;
	 background: #ebf5fc;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 box-shadow: -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1);
	 border-radius: 10px;
}
 ul li label .icon-box .fa {
	 font-size: 30px;
	 color: #00e988;
}
 
    </style>
  </head>
  <body>
  <ul>
    <li>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-home" aria-hidden="true"></i>
        </div>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-plane" aria-hidden="true"></i>
        </div>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-snowflake-o" aria-hidden="true"></i>
        </div>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-code" aria-hidden="true"></i>
        </div>
      </label>
    </li>
  </ul>
</body>
</html>